<template>
    <div>
        <nav-header title="我的发布"></nav-header>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="spa">
                <span class="ka" v-for="(item, index) in mylist" :key="index">
                    <p>{{ item.title }}</p>
                    <!-- 一张图 -->
                    <div class="img"
                        @click="$router.push({ path: '/home-list', query: { id: item._id, user_id: item.author_id } })">
                        <van-image class="img02" v-for="(iteml, indexl) in item.imageSrc" :key="indexl" :src="iteml">
                            <template v-slot:error>加载失败</template>
                        </van-image>
                    </div>
                    <div class="times">
                        <p class="name" @click="deletelist(item._id)">删除</p>
                        <p class="pinglun">{{ item.comment }}评论</p>
                        <p class="time">{{ item.time | moment }}</p>
                    </div>
                </span>
            </div>
        </van-list>
    </div>
</template>

<script>
import NavHeader from "../../components/Nav-Header.vue";
import { List } from 'vant';
export default {
    name: 'App03Myplush',
    components: {
        NavHeader,
        [List.name]: List
    },
    data() {
        return {
            userInfo: [],
            loading: false,
            finished: false,
            mylist: [],
            nums:20
        };
    },

    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem('xl-userInfo'))
        this.getpublish()
    },

    methods: {
        getpublish() {
            this.$axios.post('/api/get_user_article_list', {
                uid: this.userInfo._id,
                skip: 0,
                limit: 20
            }).then(res => {
                console.log(res)
                if (res.code == 0) {
                    this.mylist = res.data
                }
            })
        },
        // 刪除
        deletelist(index) {
            this.$dialog.confirm({
                title: '删除发布',
                message: '确认删除当前发布的内容吗？',
            })
                .then(() => {
                    this.$axios.post('/api/del_user_article', {
                        _id: index,
                        uid: this.userInfo._id,
                    }).then(res => {
                        console.log(res);
                        this.getpublish()
                        this.$toast(res.msg)
                    })
                })
                .catch(() => {
                    this.$toast('取消删除成功！')
                });
        },
        // 上拉加载
        onLoad() {
            setTimeout(() => {
                let num1 = this.nums
                let num2 = Math.floor(Math.random() * 20) + 10

                this.$axios.post('/api/get_user_article_list', {
                    uid: this.userInfo._id,
                    skip: num1,
                    limit: num2,
                }).then(res => {
                    console.log(res)
                    // console.log('请求成功！')
                    if (res.code == 0) {
                        for (let i = 0; i < res.data.length; i++) {
                            this.mylist.push(res.data[i])
                        }
                        this.nums = this.nums + num2
                        // console.log('插入！！！');
                    }
                    // console.log('1122');
                    this.loading = false;
                    // console.log('22222222');
                    // console.log(res.count)
                    // console.log(this.mylist.length);
                    if (res.count == this.mylist.length) {
                        // console.log(this.mylist)
                        // console.log('1111111');
                        this.finished = true;
                    }
                    // console.log(this.artile_list.length)
                    // console.log(res.count)
                })
            }, 1000);
        },
    },
};
</script>

<style lang="scss" scoped>
.spa {
    width: 100%;

    // background-color: cyan;
    .ka {
        display: block;
        width: 95%;
        // height: 300px;
        margin: auto;
        // background-color: antiquewhite;
        border-bottom: 1px solid rgb(201, 201, 201);

        p {
            width: 100%;
            height: 40px;
            font-size: 15px;
            font-weight: 500px;
            line-height: 40px;
            overflow: hidden;
            // padding-left: 15px;
        }

        .img {
            width: 100%;
            // height: 220px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .img01 {
                width: 90px;
                height: 90px;
                margin: 5px 10px;
            }

            .img02 {
                width: 33%;
                // height: 280px;
            }
        }

        .times {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            color: rgb(201, 201, 201);

            .name {
                margin: 0;
                width: 30%;
            }

            .pinglun {
                // margin-left: -30px;
                width: 30%;
                padding-left: 15px;
            }

            .time {
                // margin-left: -60px;
                width: 45%;
            }
        }
    }
}
</style>